<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <header>购物车</header>
        <main>
            <dl v-for="item in list">
                <input type="checkbox" v-model="item.checked">
                <dt><img :src="item.img"></dt>
                <dd>
                    <p>{{item.text}}</p>
                    <p>单价￥{{item.price}}</p>
                    <p>总价￥{{item.price*item.num}}</p>
                    <button :disabled="item.num<=1" @click="reducenum(item)">-</button>
                    <input class="num" type="text" v-model="item.num">
                    <button @click="item.num++">+</button>
                </dd>
            </dl>
        </main>
        <footer>
            <input type="checkbox" v-model="allCheck" @change="allCheckFn">
            <b>全选</b>
            <p>合计:{{totalPrice}}元</p>
            <p>{{totalNum}}个</p>
            <button :disabled="!btnDisable">结算</button>
        </footer>
    </div>


    <script src="../mock.js"></script>
    <script src="../vue.js"></script>

    <script>

        const data = Mock.mock({
            "list|5": [{
                img: "@image(100X100,@color)",
                text: "@ctitle",
                id: "@id",
                num: 1,
                "price|10-100": 0,
                checked: false
            }]
        })

        const vue = new Vue({
            el: "#app",
            data: {
                list:data.list,
                text:"",
                allCheck:false,
                totalPrice:0,
                totalNum:0,
                btnDisable:false
            },
            methods:{
                reducenum(item){
                    item.num--
                    if(item.num<1){
                        item.num=1
                    }
                },
                allCheckFn(e)
                {
                    this.list.forEach((item) => {
                        item.checked=this.allCheck
                    })
                }
            },
            watch:{
                text:function(newValue,oldValue)
                {

                },
                list:{
                    handler:function(newValue,oldValue)
                    {
                        console.log(newValue,oldValue)
                        this.allCheck=newValue.every((value) => {
                            return value.checked
                        })
                        this.totalPrice=0,
                        this.totalNum=0,
                        newValue.forEach((item) => {
                            if(item.checked)
                            {
                                this.totalPrice+=item.price*item.num
                                this.totalNum+=item.num
                            }
                        })
                        this.btnDisable=newValue.some((item) => {
                            return item.checked
                        })
                    },
                    deep:true
                }
            }
        })
    </script>
</body>

</html>